import React, { useState } from 'react'; // 引入React和useState钩子
import axios from 'axios'; // 引入axios用于发送HTTP请求
import { getAccessToken } from '../services/IFlyService'; // 引入获取访问令牌的函数

/**
 * 文字转语音组件 - 集成科大讯飞文字转语音API
 * 允许用户输入文字并将其转换为语音播放
 */
const TextToSpeech: React.FC = () => {
  // 状态管理
  const [text, setText] = useState(''); // 存储用户输入的文字
  const [audioUrl, setAudioUrl] = useState<string | null>(null); // 存储生成的音频URL

  /**
   * 处理文字转语音的转换逻辑
   */
  const handleConvert = async () => {
    const token = await getAccessToken(); // 获取科大讯飞API的访问令牌
    const ttsUrl = 'https://tts.xfyun.cn/v1/service/v1/tts'; // 科大讯飞文字转语音API的URL

    try {
      // 发送POST请求到科大讯飞API
      const response = await axios.post(
        ttsUrl,
        {
          text: text, // 用户输入的文字
          // 其他参数（根据科大讯飞API文档添加）
          // 例如：
          // voice_name: '发音人名称', // 如xiaoyan
          // volume: '音量', // 如50
          // speed: '语速', // 如50
          // pitch: '音高', // 如50
        },
        {
          headers: {
            Authorization: `Bearer ${token}`, // 在请求头中添加认证令牌
            'Content-Type': 'application/json', // 设置请求内容类型为JSON
          },
        }
      );

      // 假设返回的是音频的URL或者音频数据
      // 需要根据实际接口返回格式处理
      setAudioUrl(response.data.audio_url); // 更新音频URL状态
    } catch (error) {
      console.error('文字转语音失败:', error); // 捕获并打印错误信息
      // 在实际应用中，可以添加用户友好的错误提示
    }
  };

  return (
    <div>
      {/* 文字输入框 */}
      <textarea
        value={text} // 绑定输入框的值
        onChange={(e) => setText(e.target.value)} // 监听输入框内容变化并更新状态
        placeholder="输入要转换的文字" // 输入框占位符
      />

      {/* 转换按钮 */}
      <button onClick={handleConvert} disabled={!text.trim()}>
        转换为语音
      </button>

      {/* 音频播放控件 */}
      {audioUrl && ( // 如果audioUrl存在，则显示音频播放器
        <audio src={audioUrl} controls /> // 使用HTML5的audio标签播放音频
      )}
    </div>
  );
};

export default TextToSpeech; // 导出组件